var handlerPoint_ellipse = null;

function InitDraw3D() {
    var ellipseEntity, boxEntity, ellipsoidEntity, frustumEntity;
    var entities = viewer.entities;
    var scene = viewer.scene;
    var viewModel = {
        semiMinorAxis: 10,
        semiMajorAxis: 40,
        extrudedHeight: 50,
        ellipseMaterial: '#ffffff',
        ellipseFill: true,
        ellipseOutline: false,
        boxMaterial: '#ffffff',
        boxFill: true,
        boxOutline: false,
        ellipsoidMaterial: '#ffffff',
        cylinderMaterial: '#ffffff',
        granularity: 1,
        rotation: 0,
        boxLength: 20,
        boxWidth: 20,
        boxHeight: 20,
        xRadii: 20,
        yRadii: 20,
        zRadii: 20,
        ellipsoidFill: true,
        ellipsoidOutline: false,
        cylinderLength: 40,
        bottomRadius: 20,
        cylinderFill: true,
        cylinderOutline: false
    };

    Cesium.knockout.track(viewModel);
    var setbar_ellipse = document.getElementById('setbar_ellipse');
    Cesium.knockout.applyBindings(viewModel, setbar_ellipse);
    var setbar_box = document.getElementById('setbar_box');
    Cesium.knockout.applyBindings(viewModel, setbar_box);
    var setbar_ellipsoid = document.getElementById('setbar_ellipsoid');
    Cesium.knockout.applyBindings(viewModel, setbar_ellipsoid);
    var setbar_cylinder = document.getElementById('setbar_cylinder');
    Cesium.knockout.applyBindings(viewModel, setbar_cylinder);

    handlerPoint_ellipse = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Point);
    var handlerPoint_box = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Point);
    var handlerPoint_ellipsoid = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Point);
    var handlerPoint_frustum = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Point);

    // 注册绘制圆柱事件
    handlerPoint_ellipse.drawEvt.addEventListener(function(res) {
        var point = res.object;
        var position = point.position;
        var color = Cesium.Color.fromRandom({ alpha: 1.0 });
        ellipseEntity = entities.add({
            position: position,
            ellipse: {
                semiMinorAxis: 20.0,
                semiMajorAxis: 40.0,
                height: 0,
                extrudedHeight: 50.0,
                material: color,
                granularity: Cesium.Math.RADIANS_PER_DEGREE,
                rotation: 0,
                fill: true,
                outline: false,
                outlineColor: Cesium.Color.BLACK,
                outlineWidth: 4
            }
        });
        var colorStr = color.toCssColorString();
        viewModel.ellipseMaterial = colorStr;
        $('#colorPicker_ellipse').css({
            color: colorStr
        });
        //$('#popup_draw3D').show();
        hideAll();
        //$('#setbar_ellipse').show();
    });
    var targetEntity = null;
    var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
    handler.setInputAction(function(e) {
        var pickedObject = scene.pick(e.position);
        if (Cesium.defined(pickedObject) && (pickedObject.id instanceof Cesium.Entity)) {
            targetEntity = pickedObject.id;
        } else {
            targetEntity = null;
        }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

    //注册绘制长方体事件
    handlerPoint_box.drawEvt.addEventListener(function(res) {
        var point = res.object;
        var position = point.position;
        var color = Cesium.Color.fromRandom({ alpha: 1.0 });
        boxEntity = entities.add({
            position: position,
            box: {
                dimensions: new Cesium.Cartesian3(20.0, 20.0, 20.0),
                material: color,
                fill: true,
                outline: false,
                outlineColor: Cesium.Color.BLACK,
                outlineWidth: 4
            }
        });
        var colorStr = color.toCssColorString();
        viewModel.boxMaterial = colorStr;
        $('#colorPicker_box').css({
            color: colorStr
        });
        //$('#popup_draw3D').show();
        hideAll();
        //$('#setbar_box').show();

    });
    // 注册绘制球体事件
    handlerPoint_ellipsoid.drawEvt.addEventListener(function(res) {
        var point = res.object;
        var position = point.position;
        var posDeg = Cesium.Cartographic.fromCartesian(position);
        posDeg.height = 20;
        position = Cesium.Cartesian3.fromRadians(posDeg.longitude, posDeg.latitude, posDeg.height);
        var color = Cesium.Color.fromRandom({ alpha: 1.0 });
        ellipsoidEntity = entities.add({
            position: position,
            ellipsoid: {
                radii: new Cesium.Cartesian3(20.0, 20.0, 20.0),
                material: color,
                fill: true,
                outline: false,
                outlineColor: Cesium.Color.BLACK,
                outlineWidth: 4
            }
        });
        var colorStr = color.toCssColorString();
        viewModel.ellipsoidMaterial = colorStr;
        $('#colorPicker_ellipsoid').css({
            color: colorStr
        });
        //$('#popup_draw3D').show();
        hideAll();
        //$('#setbar_ellipsoid').show();

    });
    //注册绘制椎体事件
    handlerPoint_frustum.drawEvt.addEventListener(function(res) {
        var point = res.object;
        var position = point.position;
        var color = Cesium.Color.fromRandom({ alpha: 1.0 });
        frustumEntity = entities.add({
            position: position,
            cylinder: {
                length: 40.0,
                topRadius: 0.0,
                bottomRadius: 20.0,
                material: color,
                fill: true,
                outline: false,
                outlineColor: Cesium.Color.BLACK,
                outlineWidth: 4
            }
        });
        var colorStr = color.toCssColorString();
        viewModel.cylinderMaterial = colorStr;
        $('#colorPicker_cylinder').css({
            color: colorStr
        });
        //$('#popup_draw3D').show();
        hideAll();
        //$('#setbar_cylinder').show();
    });

    document.getElementById("cylinder").onclick = function() {
        deactiveAll();
        handlerPoint_ellipse.activate();
    };
    document.getElementById("cuboid").onclick = function() {
        deactiveAll();
        handlerPoint_box.activate();
    };
    document.getElementById("sphere").onclick = function() {
        deactiveAll();
        handlerPoint_ellipsoid.activate();
    };
    document.getElementById("cone").onclick = function() {
        deactiveAll();
        handlerPoint_frustum.activate();
    };

    function deactiveAll() {
        handlerPoint_ellipse.deactivate();
        handlerPoint_box.deactivate();
        handlerPoint_ellipsoid.deactivate();
        handlerPoint_frustum.deactivate();
    }

    function subscribeLayerParameter_Ellipse(name) {
        Cesium.knockout.getObservable(viewModel, name).subscribe(
            function(newValue) {
                if (targetEntity) {
                    if (name == 'semiMinorAxis') {
                        var semiMajorAxis = targetEntity.ellipse['semiMajorAxis'].getValue();
                        if (newValue <= semiMajorAxis) {
                            targetEntity.ellipse[name] = parseFloat(newValue);
                        } else {
                            viewModel[name] = semiMajorAxis;
                        }
                    } else if (name == 'semiMajorAxis') {
                        var semiMinorAxis = targetEntity.ellipse['semiMinorAxis'].getValue();
                        if (newValue >= semiMinorAxis) {
                            targetEntity.ellipse[name] = parseFloat(newValue);
                        } else {
                            viewModel[name] = semiMinorAxis;
                        }
                    } else if (name == 'ellipseMaterial') {
                        targetEntity.ellipse['material'] = Cesium.Color.fromCssColorString(newValue);
                    } else if (name == 'granularity') {
                        targetEntity.ellipse[name] = newValue * Cesium.Math.RADIANS_PER_DEGREE;
                    } else if (name == 'ellipseFill') {
                        targetEntity.ellipse.fill = newValue;
                    } else if (name == 'ellipseOutline') {
                        targetEntity.ellipse.outline = newValue;
                    } else {
                        targetEntity.ellipse[name] = parseFloat(newValue);
                    }
                }
            }
        );
    }

    function subscribeLayerParameter_Box(name) {
        Cesium.knockout.getObservable(viewModel, name).subscribe(
            function(newValue) {
                if (targetEntity) {
                    var dim = targetEntity.box.dimensions.getValue();
                    if (name == 'boxLength') {
                        targetEntity.box.dimensions = new Cesium.Cartesian3(parseFloat(newValue), dim.y, dim.z);
                    } else if (name == 'boxWidth') {
                        targetEntity.box.dimensions = new Cesium.Cartesian3(dim.x, parseFloat(newValue), dim.z);
                    } else if (name == 'boxHeight') {
                        targetEntity.box.dimensions = new Cesium.Cartesian3(dim.x, dim.y, parseFloat(newValue));
                    } else if (name == 'boxMaterial') {
                        targetEntity.box['material'] = Cesium.Color.fromCssColorString(newValue);
                    } else if (name == 'boxFill') {
                        targetEntity.box.fill = newValue;
                    } else if (name == 'boxOutline') {
                        targetEntity.box.outline = newValue;
                    }

                }
            }
        );
    }

    function subscribeLayerParameter_Ellipsoid(name) {
        Cesium.knockout.getObservable(viewModel, name).subscribe(
            function(newValue) {
                if (targetEntity) {
                    var radii = targetEntity.ellipsoid.radii.getValue();
                    if (name == 'xRadii') {
                        targetEntity.ellipsoid.radii = new Cesium.Cartesian3(parseFloat(newValue), radii.y, radii.z);
                    } else if (name == 'yRadii') {
                        targetEntity.ellipsoid.radii = new Cesium.Cartesian3(radii.x, parseFloat(newValue), radii.z);
                    } else if (name == 'zRadii') {
                        targetEntity.ellipsoid.radii = new Cesium.Cartesian3(radii.x, radii.y, parseFloat(newValue));
                    } else if (name == 'ellipsoidMaterial') {
                        targetEntity.ellipsoid['material'] = Cesium.Color.fromCssColorString(newValue);
                    } else if (name == 'ellipsoidFill') {
                        targetEntity.ellipsoid.fill = newValue;
                    } else if (name == 'ellipsoidOutline') {
                        targetEntity.ellipsoid.outline = newValue;
                    }

                    if (name != 'ellipsoidMaterial' && name != 'ellipsoidFill' && name != 'ellipsoidOutline') {
                        var position = targetEntity.position._value;
                        var posDeg = Cesium.Cartographic.fromCartesian(position);
                        posDeg.height = parseFloat(newValue);
                        position = Cesium.Cartesian3.fromRadians(posDeg.longitude, posDeg.latitude, posDeg.height);
                        targetEntity.position = position;
                    }
                }
            }
        );
    }

    function subscribeLayerParameter_Cylinder(name) {
        Cesium.knockout.getObservable(viewModel, name).subscribe(
            function(newValue) {
                if (targetEntity) {
                    if (name == 'bottomRadius') {
                        targetEntity.cylinder.bottomRadius = parseFloat(newValue);
                    } else if (name == 'cylinderLength') {
                        targetEntity.cylinder.length = parseFloat(newValue);
                    } else if (name == 'cylinderMaterial') {
                        targetEntity.cylinder['material'] = Cesium.Color.fromCssColorString(newValue);
                    } else if (name == 'cylinderFill') {
                        targetEntity.cylinder.fill = newValue;
                    } else if (name == 'cylinderOutline') {
                        targetEntity.cylinder.outline = newValue;
                    }
                }
            }
        );
    }
    subscribeLayerParameter_Ellipse('semiMinorAxis');
    subscribeLayerParameter_Ellipse('semiMajorAxis');
    subscribeLayerParameter_Ellipse('extrudedHeight');
    subscribeLayerParameter_Ellipse('ellipseMaterial');
    subscribeLayerParameter_Ellipse('granularity');
    subscribeLayerParameter_Ellipse('rotation');
    subscribeLayerParameter_Ellipse('ellipseFill');
    subscribeLayerParameter_Ellipse('ellipseOutline');

    subscribeLayerParameter_Box('boxLength');
    subscribeLayerParameter_Box('boxWidth');
    subscribeLayerParameter_Box('boxHeight');
    subscribeLayerParameter_Box('boxMaterial');
    subscribeLayerParameter_Box('boxFill');
    subscribeLayerParameter_Box('boxOutline');

    subscribeLayerParameter_Ellipsoid('xRadii');
    subscribeLayerParameter_Ellipsoid('yRadii');
    subscribeLayerParameter_Ellipsoid('zRadii');
    subscribeLayerParameter_Ellipsoid('ellipsoidMaterial');
    subscribeLayerParameter_Ellipsoid('ellipsoidFill');
    subscribeLayerParameter_Ellipsoid('ellipsoidOutline');

    subscribeLayerParameter_Cylinder('cylinderLength');
    subscribeLayerParameter_Cylinder('bottomRadius');
    subscribeLayerParameter_Cylinder('cylinderMaterial');
    subscribeLayerParameter_Cylinder('cylinderFill');
    subscribeLayerParameter_Cylinder('cylinderOutline');

    $('#closeBtn').click(function() {
        $('#popup_draw3D').hide();
    });

    $("#clear_draw3D").click(function() {
        hideAll();
        deactiveAll();
        removeAllEntities();
    });

    $('#colorPicker_ellipse').colorpicker({
        success: function(color) {
            $('#colorPicker_ellipse').trigger('input');
        },
        fillcolor: true,
        offsetLeft: -50
    });

    $('#colorPicker_box').colorpicker({
        success: function(color) {
            $('#colorPicker_box').trigger('input');
        },
        fillcolor: true,
        offsetLeft: -50
    });

    $('#colorPicker_ellipsoid').colorpicker({
        success: function(color) {
            $('#colorPicker_ellipsoid').trigger('input');
        },
        fillcolor: true,
        offsetLeft: -50
    });

    $('#colorPicker_cylinder').colorpicker({
        success: function(color) {
            $('#colorPicker_cylinder').trigger('input');
        },
        fillcolor: true,
        offsetLeft: -50
    });

    viewer._selectedEntityChanged.addEventListener(function(entity) {
        hideAll();
        if (!entity) {
            $('#popup_draw3D').hide();
            return;
        }
        if (entity.ellipse) {
            $('#setbar_ellipse').show();
        } else if (entity.box) {
            $('#setbar_box').show();
        } else if (entity.ellipsoid) {
            $('#setbar_ellipsoid').show();
        } else if (entity.cylinder) {
            $('#setbar_cylinder').show();
        }
        $('#popup_draw3D').show();
    });
    if (!scene.pickPositionSupported) {
        alert('不支持深度拾取,无法进行鼠标交互绘制！');
    }

    function hideAll() {
        $('#setbar_ellipse').hide();
        $('#setbar_box').hide();
        $('#setbar_ellipsoid').hide();
        $('#setbar_cylinder').hide();
    }
}